<template>
    <div class="announcement">
        <div class="icon" style="--icon: url(/icon/announcement.svg)"></div>
        <div class="text">{{ notice_popup.open ? notice_popup.title : 'No announcements at this time.' }}</div>
    </div>
</template>

<script setup>
import { onMounted } from 'vue';
import { notice_popup, userService } from '@/service/user.js';

onMounted(() => {
    userService.getNoticePopup();
});
</script>

<style scoped lang="less">
.announcement {
    box-sizing: border-box;
    width: 100%;
    height: 100%;
    padding: 2vw;
    display: flex;
    align-items: center;
    gap: 2vw;
    border-radius: 1vw;
    background-image: linear-gradient(to right, var(--active-light-color), #ffffff00);

    .icon {
        --size: 4vw;
        --w: var(--size);
        --h: var(--size);
    }

    .text {
        flex: 1;
        font-size: 3vw;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }
}
</style>